<!-- 多个文件上传 -->
<template>
  <div class="upload-file-wrapper">
    <el-upload
      class="avatar-uploader"
      action="#"
      :show-file-list="false"
      :http-request="uploadFiles"
    >
      <img v-if="imageUrl" :key="key" :src="getFullImageUrl(imageUrl)" class="avatar">
      <i v-else class="el-icon-plus avatar-uploader-icon" />
    </el-upload>
  </div>
</template>

<script>
import { uploadDirFile } from '@/api/upload'
import { getImageUrl } from '@/utils'
// import {  } from '@/'

export default {
  // import引入的组件需要注入到对象中
  components: {
  },
  props: {
    initImage: {
      type: String,
      default: ''
    }
  },
  data() {
    // 存放数据
    return {
      imageUrl: null,
      key: Math.random()
    }
  },
  // 监听属性
  computed: {
  },
  // 监控data中的数据变化
  watch: {
  },
  // 生命周期 - 创建完成
  created() {
    if (this.initImage) {
      this.imageUrl = this.initImage + '.png'
    }
    console.log(this.initImage)
  },
  // 方法
  methods: {
    uploadFiles(e) {
      uploadDirFile('home', e.file, this.imageUrl).then(res => {
        this.key = Math.random()
      })
    },
    getFullImageUrl(imgUrl) {
      return getImageUrl('home/' + imgUrl)
    }
  }
}
</script>
<style lang='scss' scoped>
// @import url(); // 引入公共css类
.upload-file-wrapper {
  margin: 8px;
    .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: 1px solid #409EFF;
  }
  .avatar {
    border: 1px solid #409EFF;
  }
}
</style>
